<template>
    <div class="carouselBox"  draggable="false" :style='`margin-top:${options.paddingTop}px;margin-bottom:${options.paddingBottom}px; height:${options.imgHeight}px`'>
        <div class="carouse_list">
            <ul v-if='imgListLength'>
                <li class="flex_box" v-for='(item,index) in (options.imgList.length>3?3:options.imgList )' :key='index'>
                    <img class="banner_img" :class="{'hasImg':!!item.imageUrl}"  :src="options.imgList[index]?options.imgList[index].imageUrl:'#'" alt="">
                </li>
            </ul>
        </div>
        <div class="box_shadow" v-if='!imgListLength'>
            <div class="react_box"></div>
            <p>请在右侧添加需要的图片</p>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            options:{
               
            },
            time:0,
            showAll:true,
            imgListLength:0
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    watch:{
        option:function(val){
            this.$nextTick(()=>{
                this.options =JSON.parse(JSON.stringify(val));
                this.imgListLength = this.options.imgList.length;
                this.time = val.time*1000 
                this.showAll = true; 
            })
        }
    },
    mounted(){
        
    }
}
</script>
<style scoped lang='less'>
.carouselBox{
    width:100%;
    height: 170px;
    position:relative; 
    background:#F8F3F0;
    .carouse_list{
        width:100%;
        height:100%;
        
        ul{
            width:100%;
            height:100%;
            display:flex;
            justify-content: space-between;
            align-items: center;
            padding:0 27px;
            box-sizing: border-box;
            li{
                width:85px;
                height:70%;
                display:flex;
                justify-content: center;
                align-items: center;
            }
            li:nth-child(2){
                width:100px;
                height:80%
            }
            .banner_img{
                width:100%;
                height:100%;
                background:red;
            }
            .hasImg{
                height:auto;
            }
        }
    }
    .box_shadow{
        position:absolute;
        width:100%;
        height:100%;
        z-index: 200;
        top:0;
        left:0;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        color:#918985;
        .react_box{
            width:100px;
            height:80px;
            background:#FFE3D5;
            margin-bottom:19px;
        }
    }
}
.el-carousel{
    overflow: hidden;
    width:100%;
    height:100%;
    img{
        width:100%;
    }
}
.circle{
   /deep/.el-carousel__button{
        border-radius:20px;
    } 
}
/deep/.el-carousel__button{
    width: 8px;
    height:8px;
    background-color:#999999;
    opacity:0.3;
}
/deep/.el-carousel__container{
    height:100%;
}
/deep/.el-carousel__indicators--outside{
    bottom:0;
    position:absolute;
}
</style>